<template>
	<view class="wrapper">
		<div class="main">
			<div class="box bfff mb30">
				<up-form :model="form" ref="uFormRef" :rules="rules">
					<up-form-item prop="receiver">
						<up-input v-model="form.receiver" placeholder="收货人姓名" />
					</up-form-item>
					<up-form-item prop="receiverPhone">
						<up-input v-model="form.receiverPhone" placeholder="收货人手机号" />
					</up-form-item>
					<up-form-item prop="province">
						<picker mode="region" @change="regionChange">
							<up-input v-model="form.provinceStr" placeholder="选择地区" disabled disabled-color="#fff" />
						</picker>

					</up-form-item>
					<up-form-item prop="detailAddress">
						<up-input v-model="form.detailAddress" placeholder="详细地址" />
					</up-form-item>
				</up-form>
				<div class="f26 ml30">如街道、门牌号、小区、乡镇、村等</div>
				<!-- <div class="mt80 flex-start">
					<image src="@/static/mall/shop_checked.png" mode="widthFix" class="t-icon"></image>
					<image src="@/static/mall/shop_check.png" mode="widthFix" class="t-icon"></image>
					<div class="f32 ml12 c999">默认</div>
				</div> -->
			</div>
			<div class="btn-add center" @click="submit">
				<div class="f36 btn-address center cfff">确定</div>
			</div>
		</div>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";

	const {
		proxy
	} = getCurrentInstance()
	const form = ref({
		receiver: '',
	});

	onLoad(r => {
		if (r.type == 1) {
			uni.setNavigationBarTitle({
				title: '修改收货地址'
			})
			form.value.id = uni.getStorageSync('adress').id
			form.value.receiver = uni.getStorageSync('adress').receiver
			form.value.receiverPhone = uni.getStorageSync('adress').receiverPhone
			form.value.detailAddress = uni.getStorageSync('adress').detailAddress
			form.value.area = uni.getStorageSync('adress').area
			form.value.city = uni.getStorageSync('adress').city
			form.value.province = uni.getStorageSync('adress').province
			form.value.provinceStr = uni.getStorageSync('adress').province + '-'
			uni.getStorageSync('adress').city + '-'
			uni.getStorageSync('adress').area
		}
	})

	// 校验规则  
	const rules = {
		receiver: [{
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change'],
		}, ],
		receiverPhone: [{
			required: true,
			message: '请输入收货电话',
			trigger: ['blur', 'change'],
		}, {
			validator: (rule, value, callback) => {
				return uni.$u.test.mobile(value);
			},
			message: '手机号码不正确',
			trigger: ['change', 'blur'],
		}],
		detailAddress: [{
			required: true,
			message: '请输入详细地址',
			trigger: ['blur', 'change'],
		}, ],
		province: [{
			required: true,
			message: '请选择地区',
			trigger: ['blur', 'change'],
		}, ],
	};

	// 表单引用  
	const uFormRef = ref(null);

	function regionChange(e) {
		form.value.province = e.detail.value[0]
		form.value.city = e.detail.value[1]
		form.value.area = e.detail.value[2] || ''
		form.value.provinceStr = e.detail.value.join('-')
	}

	// 提交方法  
	function submit() {
		uFormRef.value.validate().then(valid => {
			if (valid) {
				let url = '/api/address/add?token='
				if(form.value.id){
					url = '/api/address/modify?token='
				}
				proxy.$http(url + uni.getStorageSync('uInfo').token, form.value, true,
					'POST').then((r) => {
					uni.$u.toast('操作成功')
					proxy.back(1, 1500)
				})
			} else {
				console.log(valid)
				uni.$u.toast('校验失败')
			}
		}).catch((err) => {
			console.log(err)
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});
	}
</script>

<style lang="scss" scoped>
	.btn-add {
		padding: 60rpx 0;

		.btn-address {
			width: 600rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, #FF8901 0%, #FF5325 100%);
		}
	}

	.main {
		padding: 30rpx 32rpx 60rpx;

		.box {
			width: 686rpx;
			border-radius: 12rpx;
			box-shadow: 0rpx 0rpx 30rpx #E6E6E6;
			padding: 41rpx 43rpx;

			.t-input {
				width: 600rpx;
				height: 90rpx;
				border-radius: 16rpx;
				background: #FFFFFF;
				border: 2rpx solid #DCDFE6;

			}

			.t-icon {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
</style>